<template>
  <view class="home">
    <view class="header">
      <view class="bg">
        <image class="img" mode="heightFix" src="~@/static/img/home-header-bg.jpg" />
        <view class="modal"></view>
      </view>
      <view class="content">
        <view class="title flex flex-col">
          <text class="font-bold text-18px">XXX集团智慧工地<van-icon name="play" /></text>
          <text class="text-14px mt6px text-gray-2">项目编号</text>
        </view>
        <view class="flex justify-around items-center mt-40px text-white">
          <view class="flex flex-col text-center">
            <text class="text-20px">25%</text>
            <text class="mt5px text-14px">项目进度</text>
          </view>
          <view class="w1px h20px bg-white"></view>
          <view class="flex flex-col text-center">
            <text class="text-20px">50天</text>
            <text class="mt5px text-14px">距竣工还有</text>
          </view>
        </view>
      </view>
    </view>

    <view class="relative top--40px px15px">
      <Card>
        <!-- <view class="flex justify-between p-20px">
          <view class="flex flex-col items-center" v-for="item in cardList" :key="item.type">
            <image class="w-26px" mode="widthFix" :src="`/static/img/${item.icon}.png`" />
            <text class="text-gray-7 m-t-5px text-14px">{{ item.label }}</text>
          </view>
        </view> -->
        <view class="flex flex-wrap gap-8 p-20px">
          <view class="flex flex-col w-6/24 items-center" v-for="item in cardList" :key="item.type">
            <view
              class="w-50px h-50px flex justify-center items-center rounded-full"
              :class="item.bg">
              <image class="w-26px" mode="widthFix" :src="`/static/img/${item.icon}.png`" />
            </view>
            <text class="text-gray-7 m-t-5px text-14px">{{ item.label }}</text>
          </view>
        </view>
      </Card>

      <view class="mt15px bg-white">
        <view class="flex justify-around items-center p15px">
          <view class="flex items-center">
            <view>
              <image mode="widthFix" src="~@/static/img/jz.png" class="w-30px" />
            </view>
            <view class="flex flex-col ml5px">
              <text class="text-green-4">已开工</text>
              <text class="text-14px mt5px text-gray-4">项目进度</text>
            </view>
          </view>
          <view class="flex flex-col text-left">
            <view>
              <text class="text-14px text-gray-4">项目承建部</text>
              <text class="text-blue-4 ml5px">xxx部门</text>
            </view>
              <view>
              <text class="text-14px text-gray-4">项目经理</text>
              <text class="text-blue-4 ml5px">陈胜利</text>
            </view>
          </view>
        </view>

        <view class="h1px bg-gray-1"></view>

        <view class="flex justify-around items-center p15px">
          <view class="flex flex-col items-center">
            <text class="text-green-4">2025-05-15</text>
            <text class="text-14px mt5px text-gray-4">开工日期</text>
          </view>
          <view class="w-1px bg-gray-2 h-30px"></view>
          <view class="flex flex-col items-center">
            <text class="text-green-4">2026-05-15</text>
            <text class="text-14px mt5px text-gray-4">完工日期</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Card from '@/components/card';

export default {
  components: { Card },
  data() {
    return {
      cardList: [
        { type: 1, label: '项目状态', icon: 'rg', bg: 'bg-blue-50' },
        { type: 2, label: '承建项目部', icon: 'jx', bg: 'bg-green-50' },
        { type: 3, label: '项目经理', icon: 'cl', bg: 'bg-yellow-50' }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .header {
    position: relative;
    height: 500rpx;
    .bg {
      height: inherit;
      position: absolute;
      top: 0;
      .img {
        height: inherit;
      }
      .modal {
        width: 100%;
        height: inherit;
        // background: rgba(64, 116, 255, .9);
        // background-image: linear-gradient(var(--bg-color) 30%, transparent 70%);
        background-image: linear-gradient(to top, var(--bg-color) 0%, #005bea 100%);
        opacity: 0.9;
        position: absolute;
        top: 0;
      }
    }
    .content {
      position: relative;
      z-index: 10;
      padding: 100rpx 30rpx 0 30rpx;
      .title {
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
}
</style>
